<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .sty01{
            color: red;
            font-size: 50px;
        }

        .sty02{
            color: yellow;
            font-size: 20px;
            text-decoration: none;
        }


    </style>

    <script>
        window.onload = function () {
            // 把div01的 id 赋值给 oDiv
            var oDiv = document.getElementById("div01");
            var oA = document.getElementById("div02");

            // 读取属性值, 把 oDiv 中的 id 元素赋值给sId
            var sId = oDiv.id;
            // alert(sId);

            // 写属性值(设置属性值)
            oDiv.style.color = "red";

            // 属性名称带 '-' 要写成驼峰式
            oDiv.style.fontSize = '50px';

            // 设置class属性值
            oA.className = 'sty02';

            //操作元素包裹的内容
            //读取包裹的内容
            var sTr = oDiv.innerHTML;
            alert(sTr);
            //写元素包裹的内容, 可以写结构进去
            oDiv.innerHTML = '这是改变的文字';
            oDiv.innerHTML = '<a href="http://www.baidu.com">改变玩意</a>'
        }
    </script>
</head>
<body>
    <div id="div01">这是一个div</div>
    <a href="#" class="sty01" id="div02">这是一个连接</a>
</body>
</html>